<template>
  <div class="app-container">
    <!-- 搜索框注释时，将height: calc(100vh - 84px - 50px);改为 height: calc(100vh - 84px); -->
    <el-form ref="queryFormRef" :model="query" :inline="true">
      <el-form-item label="选择时间">
        <el-date-picker
          v-model="queryone.yearMonth"
          type="month"
          placeholder="请选择时间"
          clearable
          @change="dateSelect(queryone.yearMonth)"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getFineReport()"
          ><i-ep-search />搜索</el-button
        >
        <el-button @click="resetQuery()"><i-ep-refresh />重置</el-button>
      </el-form-item>
    </el-form>
    <!-- iframe 模块-->
    <iframe
      :src="url"
      width="100%"
      height="100%"
      frameborder="0"
      scrolling="auto"
    ></iframe>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { encodeSearchParams } from "@/utils/index";

defineOptions({
  name: "FineReport",
  inheritAttrs: false,
});

// 定义iframe url参数
const host = import.meta.env.VITE_APP_FREPORT_HOST;
const url = ref("");
import request from "@/utils/request";

// 定义report传参
const query = reactive({
  viewlet: "qms/problemcontribution.cpt",
  __showtoolbar__: true,
  date1: "",
  date2: "",
  ssoToken: "",
});
const queryone = reactive({
  yearMonth: "",
});
// 重置report参数
function resetQuery() {
  query.viewlet = "qms/problemcontribution.cpt";
  query.__showtoolbar__ = true;
}

// 获取路由参数
onMounted(() => {
  getSsoToken();
  // 获取当前年月
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0"); // 格式化为两位数
  queryone.yearMonth = `${year}-${month}`;

  // 根据yearMonth计算第一天和最后一天
  const [yearMonthYear, yearMonthMonth] = queryone.yearMonth.split("-");

  // 计算第一天
  query.date1 = `${yearMonthYear}-${yearMonthMonth}-01`; // 第一天下的固定格式

  // 计算最后一天
  const nextMonth = (parseInt(yearMonthMonth) % 12) + 1; // 计算下一个月（如果当前月是12月，下一月为第1月）
  const endMonthYear =
    nextMonth === 1 ? parseInt(yearMonthYear) + 1 : yearMonthYear; // 如果下一个月是1月，年份增加1

  // 计算当前月份的最后一天
  const lastDayOfMonth = new Date(endMonthYear, nextMonth, 0).getDate(); // 获取下一个月的第一天的前一天
  query.date2 = `${yearMonthYear}-${yearMonthMonth}-${String(
    lastDayOfMonth
  ).padStart(2, "0")}`; // 格式化成yyyy-mm-dd
  console.log(query.date1);
  console.log(query.date2);
});

async function getSsoToken() {
  try {
    const { data } = await request({
      url: `/system/fineReport/buildSsoToken`,
      method: "post",
      data: {
        userName: "admin",
      },
    });
    query.ssoToken = data;
    getFineReport();
  } catch (error) {
    alert("token获取失败，请重新尝试");
  }
}

// 生成 FineReport url 方法
function getFineReport() {
  const params = encodeSearchParams(query);
  console.log("params", params);
  params && (url.value = `${host}/decision/view/report?${params}`);
  console.log("url.value", url.value);
}
function dateSelect(value) {
  // value 是 Date 对象，表示选中的月份的第一天
  if (!value) return; // 如果没有选择日期，则直接返回

  // 获取年份和月份
  const year = value.getFullYear();
  const month = value.getMonth() + 1; // getMonth() 返回的月份从 0 开始，所以需要加 1

  // 设置 queryone.yearMonth 为 'YYYY-MM' 格式的字符串
  queryone.yearMonth = `${year}-${month < 10 ? "0" + month : month}`;

  // 计算该月的第一天和最后一天
  query.date1 = `${year}-${month < 10 ? "0" + month : month}-01`; // 第一天

  // 为了获取最后一天，我们设置日期为下个月的第一天，然后减去一天
  const nextMonthFirstDay = new Date(year, month, 1);
  nextMonthFirstDay.setDate(0); // 设置日期为0，会得到上一个月的最后一天，即本月的最后一天
  const lastDay = nextMonthFirstDay.getDate();
  query.date2 = `${year}-${month < 10 ? "0" + month : month}-${
    lastDay < 10 ? "0" + lastDay : lastDay
  }`; // 最后一天

  console.log(queryone.yearMonth); // 打印选择的年月
  console.log(query.date1); // 打印该月的第一天
  console.log(query.date2); // 打印该月的最后一天

  // 在这里可以继续您的其他逻辑，比如调用后端接口等
}
</script>

<style lang="scss" scoped>
/** 关闭tag标签  */
.app-container {
  /* 50px = navbar = 50px */
  height: calc(100vh - 50px - 50px);
}

/** 开启tag标签  */
.hasTagsView {
  .app-container {
    /* 84px = navbar + tags-view = 50px + 34px */
    // height: calc(100vh - 页头height - 搜索框height);
    height: calc(100vh - 84px - 50px);

    iframe {
      background-color: #fff;
      box-shadow: 0px 0px 12px rgba(3, 8, 72, 0.08);
    }
  }
}
</style>
